<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <!-- tab选项卡1 -->
    <div class="box tab1">
        <!-- 标题 -->
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <!-- 内容 -->
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>

    <!-- tab选项卡2 -->
    <!-- 需要再次用到tab选项卡的时候直接再赋值一份html结构，然后再new一下构造函数即可 -->
    <div class="box tab2">
        <!-- 标题 -->
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <!-- 内容 -->
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>

<!-- <script src="./demo.js"></script> -->

<script type="module">     // ES6这种导入需要用live serve打开
    import Tab from './demo.js'
    const tab1 = new Tab('.tab1',{})
    const tab2 = new Tab('.tab2',{})

/*
栈                                          堆
Tab.prototype：地址1                    地址1：{自定义数据：init、titleOver ， 底层：constructor、__proto__}
tab1：地址2                             地址2：{自定义数据：el:最大的盒模型tab1 ， 底层：__proto__：地址1}
tab2：地址3                             地址3：{自定义数据：el:最大的盒模型tab2 ， 底层：__proto__：地址1}
*/
</script>

</body>
</html>